<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap {
			width: 242px;
			height: 242px;
			border-radius: 50%;
			background-image: -webkit-linear-gradient(top, #d3e8ef 0px, #a3adb0 50px, #767674 100%);
			position: relative;
		}

		#clock {
			width: 220px;
			height: 220px;
			border-radius: 50%;
			background: #fff;
			position: absolute;
			margin-left: -110px;
			margin-top: -110px;
			top: 50%;
			left: 50%;
			box-shadow: inset 0px 5px 10px #a3a9ad;
		}

		#bp {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#bp div {
			position: absolute;
			font-size: 20px;
			top: 100px;
			left: 5px;
			width: 210px;
			height: 22px;
			text-align: center;
			line-height: 22px;
		}

		#bp span {
			display: block;
			width: 22px;
			height: 22px;
		}

		#hour {
			width: 6px;
			height: 70px;
			background: black;
			bottom: 110px;
			opacity: 0.6;
			transform-origin: 50% bottom;
		}

		#minute {
			width: 4px;
			height: 100px;
			background: purple;
			opacity: 0.6;
			bottom: 110px;
			transform-origin: 50% bottom;
		}

		#second {
			width: 2px;
			height: 100px;
			background: red;
			opacity: 0.6;
			bottom: 110px;
			transform-origin: 50% bottom;
		}

		.shot {
			position: absolute;
			left: 110px;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div id="clock">
			<div id="bp">
				<div style="transform:rotate(0deg)"><span style="transform:rotate(-0deg)">9</span></div>
				<div style="transform:rotate(30deg)"><span style="transform:rotate(-30deg)">10</span></div>
				<div style="transform:rotate(60deg)"><span style="transform:rotate(-60deg)">11</span></div>
				<div style="transform:rotate(90deg)"><span style="transform:rotate(-90deg)">12</span></div>
				<div style="transform:rotate(120deg)"><span style="transform:rotate(-120deg)">1</span></div>
				<div style="transform:rotate(150deg)"><span style="transform:rotate(-150deg)">2</span></div>
				<div style="transform:rotate(180deg)"><span style="transform:rotate(-180deg)">3</span></div>
				<div style="transform:rotate(210deg)"><span style="transform:rotate(-210deg)">4</span></div>
				<div style="transform:rotate(240deg)"><span style="transform:rotate(-240deg)">5</span></div>
				<div style="transform:rotate(270deg)"><span style="transform:rotate(-270deg)">6</span></div>
				<div style="transform:rotate(300deg)"><span style="transform:rotate(-300deg)">7</span></div>
				<div style="transform:rotate(330deg)"><span style="transform:rotate(-330deg)">8</span></div>
			</div>
			<div id="hour" class="shot"></div>
			<div id="minute" class="shot"></div>
			<div id="second" class="shot"></div>
		</div>
	</div>
	<script>
		var hourEle = document.getElementById("hour");
		var minuteEle = document.getElementById("minute");
		var secondEle = document.getElementById("second");
		function run() {
			var time = new Date();
			var msecond = time.getMilliseconds(); // 获取毫秒数
			var second = time.getSeconds() + msecond/1000;
			var minute = time.getMinutes() + second / 60;
			var hour = time.getHours() + minute / 60;
			// 秒针偏移的角度
			secondEle.style.transform = "rotate(" + second / 60 * 360 + "deg)";
			// 分针的偏移角度
			minuteEle.style.transform = "rotate(" + minute / 60 * 360 + "deg)";
			// 时针偏移角度
			hourEle.style.transform = "rotate(" + hour / 12 * 360 + "deg)";
		}

		// 需要让时间动起来
		setInterval(run, 10);



	</script>
</body>

</html>